// flex
.displayflex {
  display: flex;
  &.inline {
    display: inline-flex;
  }
  
  // 方向
  &.row-rev {
    flex-direction: row-reverse;
  }
  &.col {
    flex-direction: column;
  }
  &.col-rev {
    flex-direction: column-reverse;
  }

  // 换行
  &.wrap {
    flex-wrap: wrap;
  }
  &.wrap-rev {
    flex-wrap: wrap-reverse;
  }

  // justify-content 作用于单主轴
  &.juc-start {
    justify-content: flex-start !important;
  }
  &.juc-end {
    justify-content: flex-end;
  }
  &.juc-center {
    justify-content: center;
  }
  &.juc-between {
    justify-content: space-between;
  }
  &.juc-around {
    justify-content: space-around;
  }
  &.juc-even {
    justify-content: space-evenly;
  }

  // align-items
  &.ali-strech {
    align-items: stretch !important;
  }
  &.ali-start {
    align-items: flex-start;
  }
  &.ali-end {
    align-items: flex-end;
  }
  &.ali-center {
    align-items: center;
  }
  &.ali-baseline {
    align-items: baseline;
  }

  // align-content 作用于多主轴的行间
  &.alc-strech {
    align-content: stretch !important;
  }
  &.alc-start {
    align-content: flex-start;
  }
  &.alc-end {
    align-content: flex-end;
  }
  &.alc-center {
    align-content: center;
  }
  &.alc-between {
    align-content: space-between;
  }
  &.alc-around {
    align-content: space-around;
  }
  &.alc-even {
    align-content: space-evenly;
  }
}

//比例
.flex1 {
  .getFlex(1);
}
.flex15 {
  .getFlex(1.5)
}
.flex2 {
  .getFlex(2);
}
.flex3 {
  .getFlex(3);
}
.flex4 {
  .getFlex(4);
}
.flex5 {
  .getFlex(5);
}
.flex6 {
  .getFlex(6);
}
.flex7 {
  .getFlex(7);
}
.flex8 {
  .getFlex(8);
}